<template>
  <div style="margin-top: 5vw;">
    <div class="question">
      <div class="citizen">
        <span></span>
      </div>
      <div class="question_text">
        <p class="sq_title"><span class="fl">{{ details.sq_title }}</span></p>
        <p class="sq_content">{{ details.sq_content }}</p>
        <p class="sq_dtime"><icon type="waiting"></icon><span>{{ details.sq_dtime }}</span></p>
      </div>
    </div>
    <div class="answer">
      <div class="citizen">
        <span></span>
      </div>
      <div class="question_text">
        <p class="sq_content answer_content" v-html="details.sq_reply"></p>
        <p class="sq_dtime"><icon type="waiting"></icon><span>{{ details.publish_dtime }}</span></p>
      </div>
    </div>
  </div>
</template>

<script>
  import Icon from 'vux/src/components/icon/index'
  import Loading from 'vux/src/components/loading/index'

  export default {
    components: {
      Icon,
      Loading
    },
    methods: {
      getDetails () {
        this.$vux.loading.show({
          text: 'Loading'
        })
        let url = 'https://ydt.xy12345.cn/edot/hotMail/getHotMailInfo'
        let param = {
          sqId: this.$route.params.id // 获取sq_id
        }
        this.$axios.post(url, this.$qs.stringify(param)).then(response => {
          this.details = response.data.data
          this.$vux.loading.hide()
        })
      }
    },
    mounted () {
      this.getDetails()
    },
    data () {
      return {
        details: ''
      }
    }
  }
</script>

<style scoped>
  .question, .answer{
    overflow: hidden;
    width: 92vw;
    margin: 0 auto;
    border: solid 1px #ddd;
  }

  .citizen{
    float: left;
    width: 20vw;
    text-align: center;
    padding: 2vw;
    /*padding-right: 10px;*/
  }

  .citizen span{
    border: solid 1px #ddd;
    display: inline-block;
    overflow: hidden;
    border-radius: 50%;
    height: 13vw;
    width: 13vw;
  }

  .question_text{
    padding: 2vw 0;
    float: left;
    width: 65vw;
  }

  .sq_title{
    color: #999;
    padding: 2vw 0;
  }

  .sq_content{
    background: #eee;
    color: #666;
    padding: 2vw;
  }

  .sq_dtime{
    color: #888;
    text-align: right;
    line-height: 10vw;
  }

  .answer{
    margin: 5vw auto;
  }

  .answer_content{
    background: #f3fbff;
    color: #255c7d;
  }



</style>
